<template>
	<view class="receipt-manage">
		<image src="/static/address-top-bg.png" mode="aspectFill" class="top-bg"></image>
		<uni-swipe-action  class="receipt-list" v-if="list.length>0">
			<uni-swipe-action-item :options="swipeOption" :disabled="selAddressId===item.address_id" v-for="item in list" @click="onDeleteClick(item)" :key="item.address_id">
				<view class="receipt-box" :class="{active:selAddressId===item.address_id}"  @click="onAddressClick(item)">
					<view class="contact-info">
						<text class="contact-name">{{item.receive_name}}</text>
						<text class="contact-phone">{{item.receive_phone}}</text>
						<text class="receipt-tag" v-if="item.is_default===1">默认</text>
					</view>
					<view class="address-info">
						{{item | address}}
					</view>
					<text class="iconfont icon-edit edit-btn" @click.stop="goDetail('edit',item)"></text>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<mescroll-empty v-else :option="{tip:'您还没有收货地址，请点击下方新增/导入'}"></mescroll-empty>
		<view class="bottom-box">
			<button class="add-btn" @click="goDetail('add')">新增地址</button>
			<button class="import-btn" @click="importWxAddress">导入微信地址</button>
		</view>
		<confirm-popup :visible.sync="delPopupVisible" content="确定删除该地址吗？" @confirm="confirmDel"></confirm-popup>
	</view>
</template>

<script>
	import {authorize} from '@/common/common.js'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import ConfirmPopup from '@/components/confirm-popup.vue'
	import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue';
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem,
			ConfirmPopup,
			MescrollEmpty
		},
		data() {
			return {
				swipeOption:[{
					text: '删除',
					style: {
						fontSize:'28rpx',
						color:'#fff',
						backgroundColor: '#E7404A'
					}
				}],
				delPopupVisible:false,
				selDelAddress:'',
				selAddressId:'',
				list:[],
				isSelAction:false // 是否选择地址
			};
		},
		onLoad(data){
			this.selAddressId=Number(data.address_id)||''
			this.isSelAction=data.from==='order'
			this.getAddressList()
			uni.$on('refreshAddressList',()=>{
				this.getAddressList()
				if(this.isSelAction){  // 防止选中的地址被更新
					let data=this.list.find(item=>item.address_id===this.selAddressId)
					uni.$emit('updateAddress',data)
				}
			})
		},
		methods:{
			async getAddressList(){
				let data = await this.$api.getAddressList()
				this.list=data
				return data
			},
			goDetail(type,address){
				let url=`detail?type=${type}`
				if(address){
					address=JSON.stringify(address)
					url+='&address='+address
				}
				uni.navigateTo({
					url,
				})
			},
			onDeleteClick(item){
				this.selDelAddress=item.address_id
				this.delPopupVisible=true
			},
			importWxAddress(){
				authorize('address',()=>{
					uni.chooseAddress({
						success:res=>{
							this.addAddress(res)
						}
					})
				},'请在设置中允许使用通讯地址')
			},
			onAddressClick(item){
				if(this.isSelAction){
					uni.$emit('updateAddress',item)
					uni.navigateBack()
				}
			},
			async confirmDel(){
				await this.$api.delAddress({address_id:this.selDelAddress})
				uni.showToast({
					icon:'none',
					title: '删除成功'
				})
				this.getAddressList()
			},
			async addAddress(data){
				await this.$api.addAdress({
					user_name:data.userName,
					province_name:data.provinceName,
					city_name:data.cityName,
					county_name:data.countyName,
					detail_info:data.detailInfo,
					tel_number:data.telNumber,
					postal_code:data.postalCode,
					is_wx:1,
					original_data:JSON.stringify(data),
					is_default:0,
				})
				await this.getAddressList()
				uni.showToast({
					icon:'success',
					title:'导入成功'
				})
			}
		}
	}
</script>

<style lang="scss">
.receipt-manage{
	padding-top: 14rpx;
	padding-bottom: calc(180rpx + var(--safe-area-inset-bottom));
}
.top-bg{
	position: fixed;
	height: 14rpx;
	width: 100%;
	top:0;
	left: 0;
}
.receipt-box{
	position: relative;
	width: 100%;
	padding: 30rpx 144rpx 30rpx 66rpx;
	border-bottom: 1rpx solid #E2E9ED;
	&.active{
		&:before{
			content:'';
			position: absolute;
			left: 0;
			top:0;
			height: 100%;
			width: 16rpx;
			background-color: #E7404A;
		}
	}
}
.edit-btn{
	position: absolute;
	top:50%;
	right: 40rpx;
	transform: translateY(-50%);
	font-size: 38rpx;
	color:#CBCBCB;
}
.contact-info{
	display: flex;
	align-items: center;
	font-size: 32rpx;
	font-weight:bold;
	
}
.contact-name{
	margin-right: 20rpx;
}
.receipt-tag{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30rpx;
	padding: 0 10rpx;
	margin-left: 20px;
	font-size: 20rpx;
	color:#E7404A;
	border-radius:4rpx;
	border:1rpx solid rgba(231,64,74,1);
}
.address-info{
	margin-top: 20rpx;
	font-size: 26rpx;
	padding-right: 29rpx;
	color: #666;
}
.bottom-box{
	display: flex;
	justify-content: space-between;
	padding:30rpx 36rpx var(--safe-area-inset-bottom);
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 180rpx;
	background-color: #fff;
}
.add-btn,.import-btn{
	width:320rpx;
	height:90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	color:#E7404A;
	background:rgba(255,255,255,1);
	border-radius:51rpx;
	border:1px solid rgba(231,64,74,1);
	&::after{
		display: none;
	}
}
.import-btn{
	color:#fff;
	background:rgba(85,203,137,1);
	border:none;
}
</style>
